<template>
    <div v-if="proxy.isAuth(['ROOT', 'APPOINTMENT:SELECT'])">
        <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="form">
            <el-form-item>
                <el-date-picker v-model="dataForm.date" type="date" placeholder="选择日期" :editable="false"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable />
            </el-form-item>
            <el-form-item prop="name">
                <el-input v-model="dataForm.name" placeholder="姓名" maxlength="10" class="input" clearable />
            </el-form-item>
            <el-form-item prop="tel">
                <el-input v-model="dataForm.tel" placeholder="电话号码" maxlength="11" class="input" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchHandle()">查询</el-button>
                <el-button type="danger" :disabled="!proxy.isAuth(['ROOT', 'APPOINTMENT:DELETE'])"
                    @click="deleteHandle()">
                    批量删除
                </el-button>
            </el-form-item>
            <el-form-item class="mold">
                <el-radio-group v-model="dataForm.statusLabel" @change="searchHandle()">
                    <el-radio-button label="全部"></el-radio-button>
                    <el-radio-button label="未签到"></el-radio-button>
                    <el-radio-button label="已签到"></el-radio-button>
                    <el-radio-button label="已结束"></el-radio-button>
                    <el-radio-button label="已关闭"></el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <el-table :data="data.dataList" :header-cell-style="{ 'background': '#f5f7fa' }" border v-loading="data.loading"
            @selection-change="selectionChangeHandle">
            <el-table-column type="selection" :selectable="selectable" header-align="center" align="center" width="50"
                fixed />
            <el-table-column type="index" header-align="center" align="center" width="120" label="序号" fixed>
                <template #default="scope">
                    <span>{{ (data.pageIndex - 1) * data.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" header-align="center" align="center" label="姓名" width="200" fixed />
            <el-table-column prop="sex" header-align="center" align="center" label="性别" width="100" />
            <el-table-column prop="age" header-align="center" align="center" label="年龄" width="100" />
            <el-table-column prop="tel" header-align="center" align="center" label="联系电话" width="150" />
            <el-table-column prop="pid" header-align="center" align="center" label="身份证号" width="190" />
            <el-table-column prop="company" header-align="center" align="center" label="公司名称" width="200" />
            <el-table-column prop="title" header-align="center" align="center" label="体检套餐" min-width="200" />
            <el-table-column prop="status" header-align="center" align="center" label="状态" width="120" />
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template #default="scope">
                    <el-button type="text"
                        :disabled="!proxy.isAuth(['ROOT', 'APPOINTMENT:DELETE']) || scope.row.status != '未签到'"
                        @click="deleteHandle(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
            :current-page="data.pageIndex" :page-sizes="[10, 20, 50]" :page-size="data.pageSize"
            :total="data.totalCount" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>

</template>
<script lang="ts" setup>
import { reactive, getCurrentInstance, ref } from 'vue';
import { dayjs } from 'element-plus';
import isBetween from 'dayjs/plugin/isBetween';
dayjs.extend(isBetween);

const { proxy } = getCurrentInstance();
const dataForm = reactive({
    name: null,
    tel: null,
    date: null,
    statusLabel: '全部',
    status: null
});

const dataRule = reactive({
    name: [
        { pattern: '^[\u4e00-\u9fa5]{1,10}$', message: '姓名格式错误' }
    ],
    tel: [
        { pattern: '^1[1-9]\\d{9}$', message: '电话号码格式错误' }
    ]
});

const data = reactive({
    dataList: [],
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    loading: false,
    selections: []
});

//加载数据
function loadDataList() {
    data.loading = true;
    if (dataForm.statusLabel == '全部') {
        dataForm.status = null;
    } else if (dataForm.statusLabel == '未签到') {
        dataForm.status = 1;
    } else if (dataForm.statusLabel == '已签到') {
        dataForm.status = 2;
    } else if (dataForm.statusLabel == '已结束') {
        dataForm.status = 3;
    } else if (dataForm.statusLabel == '已关闭') {
        dataForm.status = 4;
    }

    let json = {
        name: dataForm.name,
        tel: dataForm.tel,
        date: dataForm.date,
        status: dataForm.status,
        page: data.pageIndex,
        length: data.pageSize
    };

    proxy.$http('/mis/appointment/searchByPage', 'POST', json, true, function (resp : any) {
        let page = resp.page;
        let statusEnum = {
            '1': '未签到',
            '2': '已签到',
            '3': '已结束',
            '4': '已关闭'
        };
        for (let one of page.list) {
            one.status = statusEnum[one.status];
        }
        data.dataList = page.list;
        data.totalCount = page.totalCount;
        data.loading = false;
    });
}

loadDataList();


//查询处理
function searchHandle() {
    proxy.$refs['form'].validate(valid => {
        if (valid) {
            proxy.$refs['form'].clearValidate();
            if (dataForm.date == '') {
                dataForm.date = null;
            }
            if (dataForm.name == '') {
                dataForm.name = null;
            }
            if (dataForm.tel == '') {
                dataForm.tel = null;
            }
            if (data.pageIndex != 1) {
                data.pageIndex = 1;
            }
            loadDataList();
        } else {
            return false;
        }
    });
}


function sizeChangeHandle(val) {
    data.pageSize = val;
    data.pageIndex = 1;
    loadDataList();
}

function currentChangeHandle(val) {
    data.pageIndex = val;
    loadDataList();
}

function selectionChangeHandle(val) {
    data.selections = val;
}

function selectable(row, index) {
    if (row.status != '未签到') {
        return false;
    }
    return true;
}

//删除处理
function deleteHandle(id) {
    let ids = id? [id]: data.selections.map(item => {
                                            return item.id;
                                        });
    if (ids.length == 0) {
        proxy.$message({
            message: '没有选中记录',
            type: 'warning',
            duration: 1200
        });
    } else {
        proxy.$confirm(`确定要删除选中的记录？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let json = { ids: ids };
            proxy.$http('/mis/appointment/deleteByIds', 'POST', json, true, function (resp) {
                if (resp.rows > 0) {
                    proxy.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200,
                        onClose: () => {
                            loadDataList();
                        }
                    });
                } else {
                    proxy.$message({
                        message: '未能删除记录',
                        type: 'warning',
                        duration: 1200
                    });
                }
            });
        });
    }
}

</script>

<style lang="less" scoped>
@import url("appointment.less");
</style>
